<template>
    <div class="icons">
    	<swiper>
    		<swiper-slide v-for="(page,index) of pages" :key="index">
		      <div class="icon" v-for="item of page" :key="item.id">
		        <div class="icon-img">
		          <img class="icon-img-content" :src="item.imgUrl"/>
		        </div>
		        <p class="icon-desc">{{item.desc}}</p>
		      </div>
	      </swiper-slide>
      </swiper>
    </div>
</template>

<script>
export default{
    name:'HomeIcons',
    props:{
        list:Array
    },
    computed:{
    		pages (){
    			const pages=[]
    			this.list.forEach((item,index) => {
    				const page=Math.floor(index/8)
    				if(!pages[page]){
    					pages[page]=[]
    				}
    				pages[page].push(item)
    			})
    			return pages
    		}
    }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
@import '~styles/ellipsis.styl'
.icons >>> .swiper-container
  overflow: hidden
  height:0
  padding-bottom: 50%
  margin:.2rem 0
.icon
  position:relative
  overflow:hidden
  float: left
  width: 25%
  height:0
  padding-bottom: 25%
  .icon-img
    position:absolute
    top:.1rem
    left:0
    right:0
    bottom:.44rem
    .icon-img-content
      height:90%
      display: block
      margin: 0 auto
  .icon-desc
    position:absolute
    bottom:.1rem
    height:.44rem
    width:100%
    line-height:.44rem
    text-align:center
    color:$darkColor
    overflow:hideen
    ellipsis()
</style>